import style from '../../styles/h-tag.module.scss'
import { useEffect, useState } from 'react'

import Axios from '../../services/request'
export default function HomeTags(props) {


    const [tags, setTags] = useState([])
    const getTags = () => {
        Axios.get(`/api/type`).then(res => {
            setTags(res.data)
        })
    }
    useEffect(() => {
        getTags()
    }, [])
    const handle = async (typeid) => {
        await props.handleClick(typeid)
        await props.handlePage(1)
    }

    return (
        <div className={style.TagsWrapper}>
            <div className={style.title}>
                <i className="iconfont">&#xe723;</i>
                分类
            </div>
            <div className={style.ul}>
                <div className={style.li} onClick={e => handle(false)}>
                    <span>全部</span>
                    <span>{props.total}</span>
                </div>
                {
                    tags.map(item => (
                        <div className={style.li} key={item.id} onClick={e => handle(item.id)}>
                            <span>{item.type_name}</span>
                            <span>{item.num}</span>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}
